<script lang="ts">
import Layout from '@/view/layout/index.vue'
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { useStore, mapState } from 'vuex'

export default {
  name: '',
  setup() {
    const store = useStore()
    let screenWidth = ref<number>(document.body.clientWidth)
    onMounted(() => {
      window.onresize = () => {
        return (() => {
          screenWidth.value = document.body.clientWidth
        })()
      }
    })
    watch(
      screenWidth,
      (newValue, oldValue) => {
        store.commit('clientWidthMutations', newValue)
      },
      { immediate: true, deep: true }
    )
    return {
      screenWidth,
    }
  },
  components: {
    Layout,
  },
}
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component :key="Component" :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<style scoped lang="scss"></style>
